:root {
	--darwin-traffic-lights-width: 75px;
	--controls-width: 76px;
	--top-bar-gap: 4px;

	--tab-nav-spacing-left: calc(var(--controls-width) + var(--top-bar-gap));

	&[title-bar-type="overlay"] {
		&[platform="linux"] {
			--tab-nav-spacing-right: 170px;
		}

		&[platform="win32"] {
			--tab-nav-spacing-right: 210px;
		}
	}

	&[platform="darwin"] {
		--tab-nav-spacing-left: calc(
			var(--darwin-traffic-lights-width) + var(--controls-width) +
				var(--top-bar-gap)
		);

		&[is-full-screen="true"],
		&[title-bar-type="native"] {
			--tab-nav-spacing-left: calc(var(--controls-width) + var(--top-bar-gap));
		}
	}
}

&[platform="darwin"] {
	.controls {
		left: var(--darwin-traffic-lights-width);
	}

	&[is-full-screen="true"],
	&[title-bar-type="native"] {
		.controls {
			left: 0;
		}
	}
}

.titled-section {
	display: flex;
	flex-direction: column;
	gap: var(--sl-spacing-medium);
}

.columns {
	display: grid;
	column-gap: var(--sl-spacing-x-large);

	&.columns-2 {
		grid-template-columns: 1fr 1fr;
	}
}
